<template>
    <div class="common-layout">
      <el-container>
        <el-header>
            <div class="title">
                <el-row justify="start">
                    <h1 style="margin-top: 20px; margin-left: 10px;">
                        EasyBrain
                    </h1>
                    <a href="/" id="exit">退出登录</a>
                </el-row>
            </div>
        </el-header>
        <el-container>
        <el-aside>
            <el-row class="tac">
              <el-col :span="16">
                <el-menu router
                  :default-active="activeIndex"
                  class="el-menu-vertical-demo"
                > 
                  <el-menu-item index="/home">
                    <el-icon><location /></el-icon>
                    <span>我的主页</span>
                  </el-menu-item>
                  <el-menu-item index="/device">
                    <el-icon><Monitor /></el-icon>
                    <span>设备管理</span>
                  </el-menu-item>
                  <el-menu-item index="/flow">
                    <el-icon><document /></el-icon>
                    <span>流程管理</span>
                  </el-menu-item>
                  <el-menu-item index="/info">
                    <el-icon><setting /></el-icon>
                    <span>个人信息</span>
                  </el-menu-item>
                </el-menu>
              </el-col>
            </el-row>
          </el-aside>
          <el-main>
            <div class="dataForm">
              <el-row justify="end">
                <!-- Form -->
                <el-button type="primary" @click="dialogFormVisible = true">
                  新建流程
                </el-button>
                <el-dialog v-model="dialogFormVisible" title="新建流程">
                    <el-form :model="form">
                      <el-form-item label="流程名称" :label-width="formLabelWidth">
                        <el-input v-model="form.flowName" autocomplete="off" style="width: 350px;"/>
                      </el-form-item>
                      <el-form-item label="流程状态" :label-width="formLabelWidth">
                        <el-radio-group v-model="form.status" class="ml-4">
                          <el-radio label="1" size="large">运行</el-radio>
                          <el-radio label="2" size="large">终止</el-radio>
                        </el-radio-group>
                      </el-form-item>
                      <el-form-item label="包含设备" :label-width="formLabelWidth">
                        <el-input type="textarea" v-model="form.devices" style="width: 350px;"/>
                      </el-form-item>
                      <el-form-item label="操作" :label-width="formLabelWidth">
                        <el-button type="default">点击部署</el-button>
                      </el-form-item>
                    </el-form>
                    <template #footer>
                      <span class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="dialogFormVisible = false">
                          添加
                        </el-button>
                      </span>
                    </template>
                  </el-dialog>  
              </el-row><br>
              <el-table :data="tableData" height="250" style="width: 100%">
                <el-table-column prop="flowName" label="流程名称" />
                <el-table-column prop="status" label="流程状态" />
                <el-table-column prop="devices" label="包含设备" />
                <el-table-column label="操作">
                  <el-button link type="primary" size="small" @click="handleClick">部署</el-button>
                  <el-button link type="primary" size="small">停用</el-button>
                  <el-button link type="primary" size="small">删除</el-button>
                </el-table-column>
              </el-table>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </template>
  <script lang="ts" setup>
import { reactive,ref } from 'vue'

const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const form =reactive({
        flowName:'',
        status:'',
        devices:''
})
  const activeIndex='/flow';
  const tableData = [
    {
        flowName:"流程1",
        status:"运行",
        devices:"XXX"
    },
    {
        flowName:"流程2",
        status:"终止",
        devices:"XXX"
    },
  ]
    const handleClick = () => {
    console.log('click')
    }
  </script>
  <style>
  .title{
    border-bottom:1px solid black;
  }
  .dataForm{
    width: 800px;
  }
  </style>
  